<template>
    <div>
        <div style="background: #f2f2f2;list-style-type:none">
            <li style="padding-left: 20px" class="action-cell-org">
                <div @click="toggle" class="organize-father-cell">
                    <div class="item-left">
                        <Icon class="icon-action" :type="[open ? 'minus':'plus']" color="#aaaaaa"></Icon>
                        <!--<p>|-</p>-->
                        <p class="organize-title file-text">
                            {{ data.title }}<template v-if="data.url">_({{data.url}})</template>
                        </p>
                    </div>
                    <div class="">
                        <i-button @click.stop="jumpPage(data.id,'menuAdd')" size="large" type="info">添加子菜单
                        </i-button>
                        <i-button @click.stop="jumpPage(data.id,'menuEdit')" size="large" type="success">
                            编辑
                        </i-button>
                        <i-button @click.stop="deleteEvent(data.id,data.children)" size="large" type="error">删除菜单
                        </i-button>
                    </div>
                </div>
                <ul style="padding-left: 20px;list-style-type:none" v-show="open" v-if="hasChild">
                    <tree-item v-for="(item, indexSub) in data.children" :data="item" :key="indexSub"></tree-item>
                </ul>
            </li>
        </div>
    </div>
</template>

<script>
    import apiUtil from '../assets/utils/api_util';
    import baseUtil from '../assets/utils/base-util';
    import orgAdd from '../pages/organize/add';
    import store from '../store/index';

    export default {
        name: 'TreeItem',
        props: {
            data: {},
            father: '',
        },
        mounted() {
        },
        components: {
            orgAdd
        },
        data() {
            return {
                open: true,
            }
        },
        store,
        computed: {
            hasChild() {
                return this.data.children && this.data.children.length
            }
        },
        methods: {
            toggle() {
                if (this.hasChild) {
                    this.open = !this.open
                }
            },
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                    console.log('跳')
                }

                this.$router.push(route);
            },
            jumpPageEdit: function (data, url) {
                //跳转
                let route = {
                    path: url,
                    query: {
                        id: data.id,
                        groupname: data.title,
                        grouplevel: data.GroupNtitleame,
                    },
                };

                console.l0g('传过去的data：', id);
                this.$router.push(route);
            },
            deleteEvent: function (id, index) {

                let that = this;
                if (index.length > 0) {
                    // this.$message.success('不能删除有下级组织结构的组织 ');

                    this.$Notice.warning({
                        top: 50,
                        duration: 3,
                        title: '有子级菜单不能删除'
                    })
                } else {

                    this.$Modal.confirm({
                        title: '提示',
                        content: `是否删除该菜单吗`,
                        onOk: function () {
                            this.$Loading.start();
                            let para = {
                                'id': id
                            };
                            let params = that.$qs.stringify(para);
                            apiUtil.post(that, apiUtil.urls.DelNavMenu, params, function (res) {
                                that.$message.success('删除成功 ');
                                that.jumpPage('', 'supplierAllBack');
                            });
                        }
                    })
                }

            },
        }
    }
</script>

<style>
    .tree-menu li {
        line-height: 1.5;
    }

    .icon-action > p {
        cursor: pointer;
        font-size: 14px;
        line-height: 20px;
    }

    .icon-action > p:visited {
        background: #fff;
    }

    em.icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 5px;
        background-repeat: no-repeat;
        vertical-align: middle;
    }

    .tree-menu .icon-action {
        line-height: 1.5;
    }

    .icon-action {
        margin-right: 15px;
        font-size: 18px;
    }

    .organize-father-cell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f2f2f2;
        padding: 10px;
    }

    .organize-father-cell .item-left {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

</style>
